<template>
  <el-container>
    <el-main>

      <el-form ref="carForm" :model="carForm"  label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="司机姓名" prop="driverName">
              <el-input v-model="carForm.driverName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="司机电话" prop="phone">
              <el-input v-model="carForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="车牌号" prop="name">
              <el-input v-model="carForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="addBotton">
          <el-button type="primary" :loading="loading" @click="updateCar('carForm')">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {update,find} from '@/api/car'
  import { EventBus } from '@/api/eventBus'

  export default {
    name: 'car-add',
    data(){
      return{
        loading:false,
        carForm:{
          id:'',
          name:'',
          driverName:'',
          phone:'',
        }
      }
    },
    created() {
      this.carForm.id=this.$route.query.id
      this.loadCar()
    },
    methods:{
      loadCar(){
        find( this.carForm.id).then(res=>{
            this.carForm=res.data.car
        })
      },
      updateCar(form){
        this.$refs[form].validate((valid) => {
          if (valid){
            this.loading=true
            update(this.carForm).then(res=>{
              this.loading=false
              EventBus.$emit('car-edit', res.data)
              this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                this.$router.push({
                  path: '/car/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error=>{
              this.loading=false
            })
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
